<!DOCTYPE html>
<html lang="en">
<head>
	<title>table多行多列标题排版案例</title>
	<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<style type="text/css">
		body{
			padding: 10px;
		}
		.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
            vertical-align: middle;
            text-align: center;
        }
        fieldset{
        	border: 2px solid #a94442;
        	border-radius: 10px;
        	padding: 10px;
        }
        /*去除bootstrap对legend标签样式的修改*/
        fieldset legend{
        	width: auto !important;
		    margin: 0;
		    border: 0;
        }
	</style>
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
	<fieldset>
		<legend>两行表格</legend>
		<table class="table table-bordered">
	        <thead>
	        <tr class="catalog-header">
	            <th rowspan="2">食物类别</th>
	            <th colspan="3">谷类及制品</th>
	            <th rowspan="2">乳类及制品</th>
	            <th rowspan="2">干豆类及制品</th>
	            <th colspan="4">动物类及制品</th>
	            <th colspan="2">蔬菜类</th>
	            <th colspan="2">鲜果及干果类</th>
	            <th colspan="4">调味品类</th>
	            <th rowspan="2">其他</th>
	            <th rowspan="2">食物品种</th>
	        </tr>
	        <tr>
	            <th>小吃甜饼</th>
	            <th>谷物及制品</th>
	            <th>薯类、淀粉及制品</th>
	            <th>鱼虾蟹贝类</th>
	            <th>畜肉类及制品</th>
	            <th>禽肉类及制品</th>
	            <th>蛋类及制品</th>
	            <th>蔬菜类及制品</th>
	            <th>菌藻类</th>
	            <th>坚果、种子类</th>
	            <th>水果类及制品</th>
	            <th>食用油</th>
	            <th>糖</th>
	            <th>食盐</th>
	            <th>其他</th>
	        </tr>
        </thead>
    </table>
	</fieldset>
	<fieldset>
		<legend>三行表格</legend>
		<table class="table table-bordered">
	        <thead>
	        <tr class="catalog-header">
	            <th rowspan="3">占3行</th>
	            <th colspan="5">占5列</th>
	            <th rowspan="3">占3行</th>
	            <th rowspan="3">占3行</th>
	            <th colspan="4">占4列</th>
	            <th colspan="3">占3列</th>
	            <th colspan="3">占3列</th>
	            <th colspan="4">占4列</th>
	            <th rowspan="3">占3行</th>
	            <th rowspan="3">占3行</th>
	        </tr>
	        <tr>
	            <th colspan="2">小吃甜饼</th>
	            <th rowspan="2" >谷物</th>
	        	<th rowspan="2">及</th>
	        	<th rowspan="2">制品</th>
	            <th>薯类、淀粉及制品</th>
	            <th>鱼虾蟹贝类</th>
	            <th>畜肉类及制品</th>
	            <th>禽肉类及制品</th>
	            <th>蛋类及制品</th>
	            <th>蔬菜类及制品</th>
	            <th>菌藻类</th>
	            <th>坚果、种子类</th>
	            <th>水果类及制品</th>
	            <th>食用油</th>
	            <th>糖</th>
	            <th>食盐</th>
	            <th>其他</th>
	        </tr>
	        <tr>
	        	<th>小吃</th>
	        	<th>甜饼</th>
	        
	        	<th colspan="10">动物、蔬菜、鲜果及干果</th>
	        	<th colspan="2">糖、食盐</th>
	        	<th>其他</th>
	        </tr>
        </thead>
    </table>
	</fieldset>
	<fieldset>
		<legend>
			排版顺序总结：
		</legend>
		<ol>
			<li>先排第一行、再排剩下的行</li>
			<li>占多行使用 rowspan=“行数”，占多列使用 colspan=“列数”</li>
			<li>rowspan属性<strong> 最大值 </strong>和标题<strong> 总行数 </strong>相等</li>
			<li>建议使用Excel将表格画好之后复制到dreamweaver软件里，拿到代码后再调整样式</li>
		</ol>
	</fieldset>
	<!-- 动态表格 -->
	<fieldset style="margin-top: 50px;">
		<legend>表单</legend>
		<form id="input_form" style="margin-bottom: 10px;">
			<p class="input_item">
				<button type="button" class="save_row">添加行</button>
				行名称：<input type="text" class="input_row" required>
				列名称：<input type="text" class="input_col" required>
				<button type="button" class="save_col">添加列</button>
			</p>
			<button type="submit" class="btn btn-success" id="update_table">更新表格</button>
		</form>
	</fieldset>
	<fieldset>
		<legend>动态表格</legend>
		<table class="table table-bordered" id="updateTable">
	        <thead>
	        <tr class="catalog-header">
	            <th rowspan="2">食物类别</th>
	            <th colspan="3">谷类及制品</th>
	            <th rowspan="2">乳类及制品</th>
	            <th rowspan="2">干豆类及制品</th>
	            <th colspan="4">动物类及制品</th>
	            <th colspan="2" id="tag_one">蔬菜类</th>
	            <th colspan="2">鲜果及干果类</th>
	            <th colspan="4">调味品类</th>
	            <th rowspan="2">其他</th>
	            <th rowspan="2">食物品种</th>
	        </tr>
	        <tr>
	            <th>小吃甜饼</th>
	            <th>谷物及制品</th>
	            <th>薯类、淀粉及制品</th>
	            <th>鱼虾蟹贝类</th>
	            <th>畜肉类及制品</th>
	            <th>禽肉类及制品</th>
	            <th>蛋类及制品</th>
	            <th>蔬菜类及制品</th>
	            <th id="tag_two">菌藻类</th>
	            <th>坚果、种子类</th>
	            <th>水果类及制品</th>
	            <th>食用油</th>
	            <th>糖</th>
	            <th>食盐</th>
	            <th>其他</th>
	        </tr>
        </thead>
    </table>
	</fieldset>
	<script type="text/javascript">
		$(function () {
			// 获取输入配置表单
			var input_form = $('#input_form');

			// 获取更新表格的位置
			var tag_one = $('#tag_one');
			var tag_two = $('#tag_two');
			
			var row_dom = "<p class='input_item'><button type='button' class='del_row'>删除行</button> 行名称：<input type='text' class='input_row' required> 列名称：<input type='text' class='input_col' required> <button type='button' class='save_col'>添加列</button></p>";
			var col_dom = " 列名称：<input type='text' class='input_col' required> ";

			var input_item = $('.input_item');
			// 添加行
			$(document).on('click','.save_row',function(){
				var _this = $(this);
				// 获取当前按钮所在行
				var parent_row = _this.parent();
				parent_row.after(row_dom);

			});
			// 删除行
			$(document).on('click','.del_row',function(){
				var _this = $(this);
				// 获取当前按钮所在行
				var parent_row = _this.parent();
				parent_row.remove();

			});
			$(document).on('click','.save_col',function(){
				console.log('aa')
				var _this = $(this);
				// 在当前按钮前添加输入框
				_this.before(col_dom);
			});


			// 更新表格
			input_form.on('submit',function(){
				var $this = $(this);
				var t_header = [];
				// 获取表单添加的布局数据
				$this.find('p').each(function(){
					var _this = $(this);
					var _title = _this.find('.input_row').val();
					var _list = [];
					_this.find('.input_col').each(function(){
							_list.push($(this).val());
						})
					t_header.push({
						title:_title,
						list:_list
					})
				})
				console.log(t_header);
				// t_headers = [{title:'动态行一',list:['1','2','3']},{title:'动态行二',list:['4','5','6']},{title:'动态行三',list:['7','8','9']}];
				// console.log(t_headers);


				/*
					渲染表格前清除之前的缓存
					1、清除dom缓存元素
					2、重置dom字符串
				*/
				$('#updateTable').find('.update_th').remove();
				var tag_one_dom = '';
				var tag_two_dom = '';
				for(var i = 0;i < t_header.length;i++){
					tag_one_dom += "<th colspan='"+t_header[i].list.length+"' class='update_th'>"+t_header[i].title+"</th>"
					for(var j = 0;j < t_header[i].list.length;j++){
						tag_two_dom += "<th class='update_th'>"+t_header[i].list[j]+"</th>"
					}
				}
				tag_one.after(tag_one_dom);
				tag_two.after(tag_two_dom);
				return false;
			})
		})
	</script>
</body>
</html>